<template>
  <div class="order-detail">
    <div class="order-status rx-sc">
      <div class="rx-ss">
      <img src="../../assets/order/order-status-icon4.png"/>
      <div class="fwb">
        <div class="fwb mb10 ft32">{{refundInfo.refStatus==1?'等待商家处理':refundInfo.refStatus==2?'退款成功':refundInfo.refStatus==3?'商家已拒绝':''}}</div>
        <div class="ft24">{{refundInfo.refStatus==1?refundInfo.date:refundInfo.refTime}}</div> 
        </div>
      </div>
    </div>
    <div class="order-list" @click="goGoodsDetail(goodsInfo.goodsId)">
          <!-- <div class="order-title dis-sp">
            <div class="order-title-left rx-sc">
              <img :src="sellerInfo.sellerLogo" />
              <div class="">{{sellerInfo.sellerName}}</div>
            </div>
            <div class="order-title-right" :style="orderInfo.orderStatus==5?'color:#8A8B90':'color:#DB1919'">{{orderInfo.orderStatus==1?'待付款':orderInfo.orderStatus==2?'待发货':orderInfo.orderStatus==3?'待收货':orderInfo.orderStatus==4?'已完成':orderInfo.orderStatus==5?'已关闭':'未知'}}</div>
          </div> -->
          <div class="order-content dis-sp-s" >
            <div class="order-goods rx-ss">
              <div class="goods-img" :style="{backgroundImage:'url('+goodsInfo.mainPhoto+')'}">
                <!-- <img :src="goodsInfo.mainPhoto" alt=""> -->
              </div>
              <div class="goods-detail">
                <div class="goods-title">{{goodsInfo.goodsName}}</div>
                <div class="goods-label">包邮</div>
              </div>
            </div>
            <div class="" style="text-align: right;">
              <div class="order-price">￥<span>{{goodsInfo.goodsPrice}}</span></div>
              <span class="order-num">x {{goodsInfo.goodsNum}}</span>
            </div>
          </div>
    </div>
    <div class="payment">
      <div class="payment-title">退款信息</div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">退款类型</div>
        <div class="payment-detail-right"><span>{{refundInfo.refType}}</span></div>
      </div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">退款原因</div>
        <div class="payment-detail-right"><span>{{refundInfo.reason}}</span></div>
      </div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">退款金额</div>
        <div class="payment-detail-right cor-DB1919">￥<span>{{refundInfo.refMoney}}</span></div>
      </div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">申请时间</div>
        <div class="payment-detail-right"><span>{{refundInfo.date}}</span></div>
      </div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">退款编号</div>
        <div class="payment-detail-right"><span>{{refundInfo.refId}}</span></div>
      </div>
    </div>
    <div class="payment" >
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-right ft24 flex1"><van-field label-width="5rem" style="padding:0" v-model="refundInfo.refExplain" label="退款原因" rows="1" autosize type="textarea" placeholder="（选填）补充描述，有助于商家更好的处理" input-align="right" disabled /></div>
      </div>
    </div>
    <div class="payment" v-if="refundInfo.photos.length>0">
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">退款凭证</div>
        <div class="payment-detail-right rx-ec">
          <img v-for="(li,i) in refundInfo.photos" :key="i" :src="li" class="voucher-img">
        </div>
      </div>
    </div>
    
    <!-- <div class="order-btn rx-ec" v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 3">
      <div class="cancel-order" v-if="orderInfo.orderStatus == 1">取消订单</div>
      <div class="continue-order" v-if="orderInfo.orderStatus == 1">继续付款</div>
      <div class="confirm-order" v-if="orderInfo.orderStatus == 3">确认收货</div>
    </div> -->
  </div>
</template>

<script>
import $api from "@/api/index";

export default({
  name: "ShopHome",
  components: {
    
  },
  data() {
    return { 
      active:0,
      goodsInfo:{},
      refundInfo:{},
    };
  },
  created(){
    let orderId = this.$route.query.orderId
    if(orderId){
      this.orderId = orderId
    }
    this.getRefundDetail()
  },
  methods: {
    getRefundDetail(){
      $api.orderApi.refundDetail({orderId:this.orderId}).then((res)=>{
        // this.addressInfo = res.data.addressInfo
        this.goodsInfo = res.data.goodsInfo
        this.refundInfo = res.data.refundInfo
        // this.infoList = res.data.infoList
        // this.orderInfo = res.data.orderInfo
        // this.sellerInfo = res.data.sellerInfo
      })
    },
    goGoodsDetail(id){
      this.$router.replace({path:"/goodsDetail",query:{goodsId:id,source:'2'}})
    },
    toCopy(){
      let str = this.infoList[0].infoContent;
      this.$copyText(str).then(
        res => {
          this.$message.info("已成功复制");
        },
        err => {
          this.$message.info("复制失败");
        }
      )
    },
  }
});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-detail {
  height: 100vh;
  background: #F7F7F7;
  .order-status {
    height: 192px;
    padding: 0 24px;
    background-image: url('../../assets/order/refund-order-status-bg.png');
    background-repeat: no-repeat;
    background-size: (100%,192px);
    img {
      width: 34px;
      height: 34px;
      margin-right: 12px;
    }
    div {
      font-size: 32px;
      color: #fff;
    }
    .fz-24 {
      font-size: 24px !important;
    }
  }
  
  .order-list {
    margin-top: 24px;
    padding: 24px 24px 32px 24px;
    background: #fff;
    .order-title {
      margin: 0 0 32px 0;
      font-size: 28px;
      .order-title-left{
        color: #50525A;
        img {
          width: 32px;
          height: 32px;
          margin-right: 12px;
        }
      }
    }
    .order-goods {
      .goods-img {
        min-width:160px;
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .goods-title {
        height: 68px;
        font-size: 24px;
        color: #171823;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-right: 60px;
        margin-bottom: 36px;
        text-align: left;
      }
      .goods-label {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        border: 2px solid #DB1919;
        font-size: 20px;
        color: #DB1919;
      }
    }
    .order-price {
      color: #8A8B90;
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    .order-num {
      font-size: 24px;
      color: #8A8B90;
    }
  }

  .payment {
    margin-top: 24px;
    padding: 32px 24px;
    background: #fff;
    font-size: 28px;
    .payment-title {
      margin-bottom: 32px;
      text-align: left;
      font-weight: 500;
      color: #404040;
    }
    .payment-detail{
      color: #50525A;
      .payment-detail-left{
        
      }
      .payment-detail-right{
        .voucher-img {
          width: 150px;
          height: 150px;
          margin-right: 10px;
          object-fit: contain;
          object-position: center; 
        }
      }
    }
  }
  .afterSales-btn {
    margin-top: 16px;
    text-align: right;
  }
  .confirm-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
        margin-right: 16px;
      }
  .order-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 32px 0;
    background: #fff;
      .cancel-order {
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 2px solid #D7D8D8;
        color: #8A8B90;
        margin-right: 16px;
      }
      .continue-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
        margin-right: 16px;
      }
      
      .delete-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 2px solid #D7D8D8;
        color: #8A8B90;
        margin-right: 16px;
      }
    }
}
.cor-DB1919{
  color: #DB1919;
}
.cor-999{
  color: #999999;
}
.flex1{
  flex: 1;
}
</style>
